<!--
 * @description: 
 * @Author: jhw
 * @Date: 2023-09-09 22:01:34
 * @LastEditors: jhw
 * @LastEditTime: 2023-09-09 22:04:39
-->
<!--
 * @Descripttion: 日常练习
 * @Author: jhw
 * @Date: 2023-08-07 16:23:11
 * @LastEditors: jhw
 * @LastEditTime: 2023-09-09 21:56:13
-->
<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="(item, i) in modulesList" :key="i" :label="item.name" :name="item.name">
      <component :is="item.components"></component>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { modulesList } from '.';

const activeName = ref('Notification开发');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
